import {
	Primary,
	Controls,
	Stories,
	Meta,
	Story,
} from '@storybook/addon-docs/blocks';

import * as IconStories from './Icon.stories.js';

<Meta of={IconStories} />

# Icon

## Usage

Use this component to display an icon. Use icons when you want to visually connect two parts of the UI that are not otherwise connected. For example, the [ListPanel](#/component/ListPanel) filters use an icon to link the button with the panel it controls.

Use any icons from our [Icon Gallery](?path=/story/components-icon--icon-gallery).

## Be careful when using icon-only labels

You may want to use icon-only labels when fitting a lot of information into a small space. Such icon-based display can be useful for presenting dense information, but these patterns tend to favor experienced users over novice ones. Use with caution.

## Avoid decorative icons

When adding buttons or other controls, do not add an icon when the text label sufficiently describes the action.

## Help Icon

The `Help` icon is reserved for providing information on how to use the software.

<Story of={IconStories.Help} />

## Error / Warning Icon

The `Error` icon is reserved for warning the user about an error, urgent information, or a serious consequence of an expected action.

<Story of={IconStories.Error} />

<Primary />
<Controls />
<Stories />
